<script setup lang="ts">
import { ref } from "vue";
import { RouterView } from "vue-router";
import ScaleScreen from "@/components/scale-screen";
import Headers from "./header.vue";
import Setting from "./setting.vue";
import { useSettingStore } from "@/stores/index";
import { storeToRefs } from "pinia";
import MessageContent from "@/components/Plugins/MessageContent";

const settingStore = useSettingStore();
const { isScale } = storeToRefs(settingStore);
const wrapperStyle = {};
</script>

<template>
  <scale-screen width="1920" height="1080" :delay="500" :fullScreen="false" :boxStyle="{
      background: '#03050C',
      overflow: isScale ? 'hidden' : 'auto',
    }" :wrapperStyle="wrapperStyle" :autoScale="isScale">
    <div class="content_wrap">
      <Headers />
      <div class="router-box">
        <div class="navigate">
          <router-link to="/index">首页</router-link> |
          <router-link to="/fagui">政策法规</router-link> |
          <router-link to="/ziliao">资料</router-link> |
          <router-link to="/anli">案例</router-link> |
          <router-link to="/reci">热词</router-link>
        </div>
      </div>
      <RouterView />
      <!-- <div class="router-box">
        <div class="navigate">
          <router-link to="/index">首页</router-link> |
          <router-link to="/fagui">政策法规</router-link> |
          <router-link to="/ziliao">资料</router-link> |
          <router-link to="/anli">案例</router-link> |
          <router-link to="/reci">热词</router-link>
        </div>
      </div> -->
      <MessageContent />
    </div>
  </scale-screen>
  <Setting />
</template>
<style lang="scss" scoped>
.content_wrap {
  width: 100%;
  height: 100%;
  padding: 16px 16px 16px 16px;
  box-sizing: border-box;
  background-image: url("@/assets/img/bg.png");
  background-size: cover;
  background-position: center center;
  background-color: rgba(0, 0, 0, 0.5);
}
.router-box{
  position: fixed;
  top:3%;
  left: 8px;
  font-size: 25px;
  color: black;
  background-color: antiquewhite;
  border-radius: 15px;
  padding: 2px;
  border: 2px solid black;
  .navigate{
    width: 450px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    }
    .router-link-exact-active {
      color: #227cd1;
    }
}
</style>
